<template>
  <div class="app-container checkContainer">
    <div class="customContainer">
      <!-- 搜索头 -->
      <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
        <dj-store-select :category="129" :defaultStore="formInline.store_id" :needItem="true" @change="selectStoreChanged" />
        <el-form-item>
          <el-date-picker v-model="pickerDate" value-format="yyyy.MM.dd" type="daterange" align="right" unlink-panels range-separator="-"
            start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"></el-date-picker>
        </el-form-item> 
        <el-form-item>
          <dj-button size="small" @search="searchClick" />
        </el-form-item>
        <el-form-item>
          <el-tooltip class="item" effect="dark" placement="bottom-end">
            <div slot="content" style="line-height:20px">
              <br> 时间:查询的日期，日周期为今日6点至次日6点 上次盘点时间:即一个盘点周期内上一次主仓或者中转仓盘点确认后的时间
              <br> 本次盘点时间:即一个盘点周期内这一次主仓或者中转仓盘点确认后的时间
              <br> 上次盘点库存（个）:即一个盘点周期内上一次盘点完成后的门店仓（主仓+中转仓+机台仓）的礼品数
              <br> 本次账目库存（个）:经实际操作后的理论实际库存数
              <br> 本次盘点库存（个）:经盘点校准和完成后的校准数
              <br> 盘盈数（个）:公式=盘点数-理论库存数
              <br> 盘亏数（个）:公式=盘点数-理论库存数
              <br> 店内仓:主仓，中转仓-渠道，机台仓
            </div>
            <i class="el-icon-question"></i>
          </el-tooltip>
        </el-form-item>
      </el-form> 
      <el-table highlight-current-row :data="list" v-loading.body="listLoading" border size="mini">
        <el-table-column align="center" label="序号">
          <template slot-scope="scope">
            <b>{{scope.$index + 1}}</b>
          </template>
        </el-table-column>
        <el-table-column align="center" label="本次盘点时间">
          <template slot-scope="scope">
            <b>{{scope.row.end}}</b>
          </template>
        </el-table-column>
        <el-table-column align="center" label="上次盘点时间">
          <template slot-scope="scope">
            {{scope.row.begin}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="仓库">
          <template slot-scope="scope">
            <el-button type="text" @click="ditailClick(scope.row)">店内仓详情</el-button>
          </template>
        </el-table-column>
        <el-table-column align="center" label="上次盘点库存（个）" prop="lastStock"></el-table-column>
        <el-table-column align="center" label="本次账面库存（个）" prop="thisTheory"></el-table-column>
        <el-table-column align="center" label="本次盘点库存（个）" prop="thisActual"></el-table-column>
        <el-table-column align="center" label="盘盈数量（个）" prop="checkMore">
          <template slot-scope="scope">
            <router-link :to="{name:'report/checkDetail_form',params :{store_id:scope.row.store_id,time:scope.row.end_time}}">
              <el-button class="success" type="text"> {{scope.row.checkMore}}</el-button>
            </router-link>
          </template>
        </el-table-column>
        <el-table-column align="center" label="盘盈金额（元）" prop="moneyMore">
          <template slot-scope="scope">
            <router-link :to="{name:'report/checkDetail_form',params :{store_id:scope.row.store_id,time:scope.row.end_time}}">
              <el-button class="success" type="text"> {{scope.row.moneyMore|keepTwoNum}}</el-button>
            </router-link>
          </template>
        </el-table-column>
        <el-table-column align="center" label="盘亏数量（个）" prop="checkLess">
          <template slot-scope="scope">
            <router-link :to="{name:'report/checkDetail_form',params :{store_id:scope.row.store_id,time:scope.row.end_time}}">
              <el-button class="danger" type="text"> {{scope.row.checkLess}}</el-button>
            </router-link>
          </template>
        </el-table-column>
        <el-table-column align="center" label="盘亏金额（元）" prop="moneyLess">
          <template slot-scope="scope">
            <router-link :to="{name:'report/checkDetail_form',params :{store_id:scope.row.store_id,time:scope.row.end_time}}">
              <el-button class="danger" type="text"> {{scope.row.moneyLess|keepTwoNum}}</el-button>
            </router-link>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 弹框 -->
    <el-dialog :close-on-click-modal="false" width="80%" title="店内仓盘点" :visible.sync="detailDialog">
      <div style="position:absolute;top:50px;">
        <span class="pr">门店：{{store_name}}</span>
        <span class="pr">本次盘点时间：{{this_time}}</span>
        <span class="pr">上次盘点时间：{{last_time}}</span>
        <span class="pr">盘盈金额合计：{{detailMoneyMore|keepTwoNum}}</span>
        <span class="pr">盘亏金额合计：{{detailMoneyLess|keepTwoNum}}</span> 　　　　 　　 　　 
      </div>
      <el-table highlight-current-row :data="detailList" border size="mini" v-loading="detailLoading">
        <el-table-column align="center" label="序号">
          <template slot-scope="scope">
            <b>{{scope.$index + 1}}</b>
          </template>
        </el-table-column>
        <el-table-column align="center" property="house_name" label="店内仓"></el-table-column>
        <el-table-column align="center" property="lastStock" label="上次盘点库存（个）"></el-table-column>
        <el-table-column align="center" property="thisTheory" label="本次账面库存（个）"></el-table-column>
        <el-table-column align="center" property="thisActual" label="本次盘点库存（个）"></el-table-column>
        <el-table-column align="center" label="盘盈数量">
          <template slot-scope="scope">
            <router-link :to="{name:'report/checkDetail_form',params :{store_id:scope.row.store_id,time:scope.row.end_time,house_id:scope.row.house_id}}">
              <el-button class="success" type="text" @click="detailDialog=false"> {{scope.row.checkMore}}
              </el-button>
            </router-link>
          </template>
        </el-table-column>
        <el-table-column align="center" label="盘亏数量">
          <template slot-scope="scope">
            <router-link :to="{name:'report/checkDetail_form',params :{store_id:scope.row.store_id,time:scope.row.end_time,house_id:scope.row.house_id}}">
              <el-button class="danger" type="text" @click="detailDialog=false"> {{scope.row.checkLess}}
              </el-button>
            </router-link>
          </template>
        </el-table-column>
        <el-table-column align="center" label="盘盈金额（元）">
          <template slot-scope="scope">
            <router-link :to="{name:'report/checkDetail_form',params :{store_id:scope.row.store_id,time:scope.row.end_time,house_id:scope.row.house_id}}">
              <el-button class="success" type="text" @click="detailDialog=false"> {{scope.row.moneyMore|keepTwoNum}}
              </el-button>
            </router-link>
          </template>
        </el-table-column>
        <el-table-column align="center" label="盘亏金额（元）">
          <template slot-scope="scope">
            <router-link :to="{name:'report/checkDetail_form',params :{store_id:scope.row.store_id,time:scope.row.end_time,house_id:scope.row.house_id}}">
              <el-button class="danger" type="text" @click="detailDialog=false"> {{scope.row.moneyLess|keepTwoNum}}
              </el-button>
            </router-link>

          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <!-- 自定义底部 -->
    <div class="bottom_box" v-if="list">
      <!-- <el-button class="pull-right" type="primary" size="small" @click="exportClick()" :loading="exportLoading">导出表单
        <count-down ref="cd" />
      </el-button> -->
      <span class="pull-right mt10"
        style="font-size:14px;color:#606266">　盘盈金额合计：{{moneyMore|keepTwoNum}}&#x3000;&#x3000;盘亏金额合计：{{moneyLess|keepTwoNum}}&#x3000;&#x3000;</span>

    </div>
  </div>
</template>
<script>
import { getList, getExport, getDetail} from '@/api/storage_control/checkCollect_form';
import { pickerOptionsF, pickerDateF, optionMaxTime,getDateString  } from '@/utils';
import { DjStoreSelect } from '@/components/store';
export default {
  components: { 
    'dj-store-select': DjStoreSelect
  },
  data() {
    return {
      exportLoading: false, 
      list: null,
      store_name: '',
      last_time: '',
      this_time: '',
      listLoading: false,
      detailDialog: false,
      detailLoading: false,
      storeList: null,
      detailList: [],
      formInline: {
        // category_id: 129,
        store_id: this.$store.getters.optionId,
        begin_time: '',
        end_time: '',
        look_del: '0'
      },
      pickerOptions: pickerOptionsF(-1),
      pickerDate: pickerDateF(-1,-1),
      moneyMore: 0.0,
      moneyLess: 0.0,
      detailMoneyMore: 0,
      detailMoneyLess: 0
    };
  },
  beforeRouteEnter(to, from, next) {
    next(vm => { 
      vm.beforeComingIn();
    });
  },
  methods: { 
    beforeComingIn() {
      if (this.$route.query.routerflag) {
        // console.log(this.$route.query, 'zst1119 beforeComingIn route.query');
        let col = this.$route.query.col;
        let row = this.$route.query.row;
        // 本月第一天至昨天
        let fist_day = getDateString('this_month_first_day', row.time);
        let date = new Date(row.time);
        let now = new Date();
        let yesterday;
        if (date.getMonth() == now.getMonth()) {
          yesterday = getDateString('yesterday');
        } else {
          yesterday = getDateString('this_month_last_day', row.time);
        }
        fist_day = fist_day.replace('-','.').replace('-','.')
        yesterday = yesterday.replace('-','.').replace('-','.') 
        this.pickerDate = [fist_day, yesterday];
        this.formInline.store_id = row.store_id;
        // this.searchClick();
      } 
      // else {
      //   if (!this.list || this.list.length == 0) {
      //     this.searchClick();
      //   }
      // }
    },
    selectStoreChanged(obj) {
      for (let key in obj) this.formInline[key] = obj[key]; 
      this.searchClick();
    },
    // 详情弹框
    ditailClick(row) {
      this.detailList=[];
      this.store_name = row.store_name;
      this.last_time = row.begin;
      this.this_time = row.end;
      this.detailLoading=true;
      getDetail({ store_id: this.formInline.store_id, time: row.end_time }).then(response => {
        response.zhu.push.apply(response.zhu, response.zhong);
        response.zhu.push.apply(response.zhu, response.machine);
        this.detailList = response.zhu;
        let detailList = this.detailList;
        this.detailMoneyMore = 0;
        this.detailMoneyLess = 0;
        if (detailList.length > 0) {
          for (let key in detailList) {
            this.detailMoneyMore += parseFloat(detailList[key].moneyMore);
            this.detailMoneyLess += parseFloat(detailList[key].moneyLess);
          }
        }
        this.detailLoading=false;
      }).catch(()=>{
        this.detailLoading=false;
      });
      this.detailDialog = true;
    },
    // 导出
    exportClick() {
      getExport(this.formInline);
      this.exportLoading = true;
      this.$refs.cd.countDownF(30).then(() => {
        this.exportLoading = false;
      });
    }, 
    // 搜索
    searchClick() {
      optionMaxTime(this.pickerDate).then(() => {
        //最大可选择时间区间
        this.formInline.begin_time = this.pickerDate ? this.pickerDate[0] : '';
        this.formInline.end_time = this.pickerDate ? this.pickerDate[1] : '';
        this.fetchData();
      });
    },
    // 列表获取
    fetchData() {
      this.listLoading = true;
      getList(this.formInline)
        .then(response => {
          this.list = response.list;
          this.moneyMore = response.totle.moneyMore;
          this.moneyLess = response.totle.moneyLess;
          this.listLoading = false;
        })
        .catch(res => {
          this.listLoading = false;
        });
    }
  }
};
</script>
<style scoped>
.pr {
  padding-right: 15px;
}
</style>